<template>
    <div style="width: 100%; height: 100%; background-color: #535353;">
        <div style="width: 80%;padding: 0 10%;" class="text-white">
            <el-row>
                <el-col class="align-center">

                    <el-input v-model="keyword" style="max-width: 360px;margin: 36px 0;">
                        <template #append>
                            <i class="fa fa-fw fa-search"></i>
                        </template>
                    </el-input>
                </el-col>
            </el-row>

            <sea-grid col="4">
                <div class="align-center" v-for="(item, index) in list" :key="index" @click="onClick(item)">
                    <image-icon alt="icon" :src="item.image" :text="item.text" size="128" font-size="32px"
                                class="img-circle home-item" :style="{backgroundColor: item.color}"></image-icon>
                    <h3 style="font-weight: normal">{{ item.label }}</h3>
                </div>
            </sea-grid>
        </div>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import router from "@/router/index";
import ImageIcon from "@/widget/image/image-icon.vue";

const keyword = ref('');
// 535353
// 353c35
/**
 * 主页菜单列表
 *
 * @type {Reactive<[{image: string, route: string, label: string}]>}
 */
const list = reactive([
    {
        label: '百度一下', text: '百度', type: 'hyperlink', color: '#3498DB'
        , value: 'https://www.baidu.com', image: ''
    }
    , {
        label: '文心一言', text: '文心', type: 'hyperlink', color: '#3498DB'
        , value: 'https://yiyan.baidu.com/', image: ''
    }
    , {
        label: '格式转换', text: '格式', type: 'route', color: '#3498DB'
        , value: '/tools/frog', image: ''
    }
    , {
        label: '生成代码', text: '代码', type: 'route', color: '#3498DB'
        , value: '/tools/code', image: ''
    }
    , {
        label: '产品主页', text: '主页', type: 'route', color: '#1ABC9C'
        , value: '/core', image: ''
    }
    , {
        label: 'UI 设计', text: 'UI', type: 'route', color: '#1ABC9C'
        , value: '/sample', image: ''
    }
    , {
        label: 'GIS设计', text: 'GIS', type: 'route', color: '#1ABC9C'
        , value: '/gis', image: ''
    }
    , {
        label: '系统介绍', text: '文档', type: 'route', color: '#1ABC9C'
        , value: '/tools/blog', image: ''
    }
    , {
        label: '快捷测试', text: '测试', type: 'route', color: '#1ABC9C'
        , value: '/test', image: ''
    }
    , {
        label: 'ICON', text: '图标', type: 'route', color: '#1ABC9C'
        , value: '/sample/base/icons', image: ''
    }
]);

/**
 * 菜单点击事件
 *
 * @param item
 */
const onClick = (item) => {
    if (item.type === 'hyperlink') {
        // 外链接
        window.open(item.value);
    } else if (item.type === 'route') {
        // 站内路由
        router.push(item.value);
    }
}

</script>

<style scoped lang="scss">

.home-item {
    width: 128px;
    height: 128px;
    border: 3px solid #e4dfcc;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);

    &:hover {
        box-shadow: 0 0 16px 16px rgba(30, 229, 206, 0.2);
    }
}

</style>
